.fluent-data-grid {
    --fluent-data-grid-resize-handle-color: var(--accent-fill-rest);
    --fluent-data-grid-resize-handle-width: 1px;
    --fluent-data-grid-header-opacity: 0.5;
    width: auto;
    flex: 1;
    border-collapse: collapse;
    align-items: center;
    height: max-content;
    margin-bottom: 0px;
}

    .fluent-data-grid.grid {
        display: grid;
    }

.grid thead,
.grid tbody {
    display: contents;
}

.grid ::deep tr {
    display: contents;
}

.fluent-data-grid tbody tr .hover {
    background: var(--neutral-fill-stealth-hover);
}

.col-options, .col-resize {
    position: absolute;
    min-width: 250px;
    top: 2.7rem;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-layer-3);
    border-radius: 0.3rem;
    box-shadow: 0 3px 8px 1px var(--neutral-layer-4);
    padding: 1rem;
    visibility: hidden;
    z-index: 1;
}

[dir=rtl] .col-options {
    left: unset;
}

.col-justify-end .col-options,
.col-justify-right .col-options {
    left: unset;
    margin-right: 0.6rem;
}

[dir=rtl] .col-justify-end .col-options,
[dir=rtl] .col-justify-right .col-options {
    right: unset;
    margin-left: 0.6rem;
}



.resize-options {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

::deep .resize-handle {
    position: absolute;
    top: 5px;
    right: 0;
    left: unset;
    bottom: 0;
    height: 30px;
    cursor: col-resize;
    width: 6px;
    border-inline-end: var(--fluent-data-grid-resize-handle-width) solid var(--fluent-data-grid-resize-handle-color);
    opacity: var(--fluent-data-grid-header-opacity);
}

.header {
    padding: 0;
    z-index: 3;
}

::deep tr[row-type='sticky-header'] > th {
    position: sticky;
    top: 0;
    background-color: var(--neutral-fill-stealth-rest);
    z-index: 2;
}
